<style lang="less">
.page-templets{
    .main .main-form{
        width: 54%;
    }

    .text-help{
        margin: 0;
        font-size: 12px;
        line-height: 1;
        color: #B4B4B4;
    }

    .label-add{
        margin-top: 5px;
        border:1px #B4B4B4 solid;
    }
    .label-edit-header {
        padding: 10px;
        display: inline-block;
    }
    .label-edit-input {
        margin-left: 10px;
        width: 250px;
    }
    .keyword-button {
         margin: 5px;
    }
    .keyword-button-show:hover {
        background-color: #00dbff
    }
    .keyword-button-delete {
        top: -15px;
        position: relative;
        right: -20px;
        color: red;
    }
    
}
.confirm-btn {
    text-align: center;
    margin-top: 30px;
    margin-left: 50%
}
</style>
<template>
    <div class="main page-font">
        <div class="main-header">
            <el-breadcrumb>
                <el-breadcrumb-item :to="{ path: '/tickets' }">票券查询</el-breadcrumb-item>
                <el-breadcrumb-item>票券销售</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <el-form class="main-form" label-width="100px" :model="itemModel" @submit.native.prevent="save()">
            <el-form-item label="票券大类">
                <el-select v-model="itemModel.grand_id">
                    <el-option
                        v-for="item in grands"
                        :label="item.name"
                        :value="item.id"
                        :key="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="票券类型">
                <el-select v-model="itemModel.parent_id">
                    <el-option
                        v-for="item in parents"
                        :label="item.name"
                        :value="item.id"
                        :key="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="客户">
                <el-select v-model="itemModel.customer_id">
                    <el-option
                        v-for="item in customers"
                        :label="item.name"
                        :value="item.id"
                        :key="item.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-for="attr in attrs" v-bind:key="attr.id" :label="attr.name">
                <el-checkbox-group v-model="attr.values" @change="onAttrChange(attr)">
                    <el-checkbox v-for="item in attr.items" v-bind:key="item.id" :label="item">{{item.name}}</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="有效开始时间">
                <DatePicker type="datetime" v-model="itemModel.start_time"></DatePicker>
                <span class="tips" style="margin-left:.6em;color:#999">* 票券可使用开始时间</span>
            </el-form-item>
            <el-form-item label="有效截止时间">
                <DatePicker type="datetime" v-model="itemModel.end_time"></DatePicker>
                <span class="tips" style="margin-left:.6em;color:#999">* 票券可使用截止时间</span>
            </el-form-item>

            <el-form-item label="销售数量">
                <el-input-number v-model="itemModel.num" :min="0"></el-input-number>
                <span class="tips" style="margin-left:.6em;color:#999">* 剩余数量{{leftNum}}张</span>
            </el-form-item>
            <el-form-item label="销售员">
                <el-select v-model="itemModel.creator">
                    <el-option
                        v-for="item in users"
                        :label="item.name"
                        :value="item.id"
                        :key="item.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="价格">
                <el-input v-model="itemModel.price"></el-input>
            </el-form-item>
            <el-form-item label="销售理由">
                <el-input type="textarea" v-model="itemModel.remark"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button native-type="submit" type="primary" @click="addApply">添加销售</el-button>
            </el-form-item>
        </el-form>
        <el-table
            border
            :data="applys"
            >
            <el-table-column label="票券大类" inline-template>
                <div>
                   <el-select v-model="row.grand_id">
                    <el-option
                        v-for="item in grands"
                        :label="item.name"
                        :value="item.id"
                        :key="item.id"
                    ></el-option>
                </el-select>
                </div>
            </el-table-column>
            <el-table-column label="票券类型" inline-template>
                <div>
                    <el-select v-model="row.parent_id">
                    <el-option
                        v-for="item in parents"
                        :label="item.name"
                        :value="item.id"
                        :key="item.id"
                    >
                    </el-option>
                </el-select>
                </div>
            </el-table-column>
            <el-table-column label="客户" inline-template>
                <div>
                    <el-select v-model="row.customer_id">
                        <el-option
                            v-for="item in customers"
                            :label="item.name"
                            :value="item.id"
                            :key="item.id"
                        >
                        </el-option>
                    </el-select>
                </div>
            </el-table-column>
            <el-table-column prop="num" label="数量"></el-table-column>
            <el-table-column prop="price" label="统一价格"></el-table-column>
            <el-table-column prop="private_price" label="总计" inline-template>
                <div>
                    ￥{{row.num * row.price}}
                </div>
            </el-table-column>
            <el-table-column prop="remark" label="销售理由"></el-table-column>
        </el-table>
        <el-row>
            <el-button class="confirm-btn" native-type="submit" type="primary" @click="confirmApply">提交销售</el-button>
        </el-row>
    </div>
</template>

<script>
import lodash from 'lodash';
import ItemController from '../controllers/item';

import User from '../models/user';
import Ticket from '../models/ticket';
import AttributeModel from '../models/attribute';
import TypeModel from '../models/type';
import CustomModel from '../models/customer';


export default new ItemController({
    data() {
        return {
            itemModel: {
                grand_id: 0,
                parent_id: 0,
                start_time: '',
                end_time: '',
                num: '',
                price: 0,
                remark: '',
                customer_id: 0,
                creator: 0,
            },
            leftNum: 10,
            applys: [],
            attrs: [],
            customers: [],
            grands: [],
            parents: [],
            users: []
        };
    },
    methods: {
        beforeLoadModel() {
            return Promise.all([
                this.loadGrands(),
                this.loadParents(),
                this.loadCustomers(),
                this.loadUsers(),
                this.loadAttrs()
            ]);
        },
        loadParents(parent_id) {
            return TypeModel.query({
                parent_id: parent_id
            })
            .$promise
            .then(types => {
                this.parents = types.items;
                this.itemModel.parent_id = types.items[0].id;
            });
        },
        loadUsers() {
            return User.query({
                role_id: 5,
            })
            .$promise
            .then(types => {
                this.users = types.items;
                this.itemModel.creator = types.items[0].id;
            });
        },
        loadGrands() {
            return TypeModel.query({
                parent_id: 0,
                grand_id: 0
            })
            .$promise
            .then(types => {
                this.grands = types.items;
                this.itemModel.grand_id = types.items[0].id;
            });
        },
        loadCustomers() {
            return CustomModel.query({
            })
            .$promise
            .then(customers => {
                this.customers = customers.items;
                this.itemModel.customer_id = customers.items[0].id;
            });
        },
        addApply() {
            this.applys.push(this.itemModel);
            this.itemModel = {
                grand_id: this.grands[0].id,
                parent_id: this.parents[0].id,
                start_time: '',
                end_time: '',
                num: '',
                price: 0,
                remark: '',
                customer_id: this.customers[0].id,
            };
        },
        confirmApply() {

        },
        loadAttrs() {
            const attrs = [
                // { type: 'role', key: 'roles', name: '场景' },
                { type: 'weekdays', key: 'weekdays', name: '使用限制' },
            ];

            return AttributeModel.get()
            .$promise
            .then(attrsMap => {
                return attrs.map(attr => {
                    attr.items = attrsMap[attr.type] || [];
                    attr.values = [];

                    return attr;
                });
            })
            .tap(attrs => {
                this.attrs = attrs;
            });
        },
        onAttrChange(attr) {
            this.itemModel[attr.key] = attr.values.reduce((val, item) => {
                return val | item.id;
            }, 0);
        },
        syncAttrs() {
            const itemModel = this.itemModel;

            this.attrs.forEach(attr => {
                let val = itemModel[attr.key];
                if(!val || !attr.items.length) {
                    return;
                }

                attr.items.forEach(item => {
                    if(val & item.id) {
                        attr.values.push(item);
                    }
                });
            });
        },
        afterSave() {
            this.$message.success('保存成功');

            // this.$router.back();
        },
    },
    watch: {
        'itemModel.grand_id': {
            deep: true,
            handler(newVal, oladVal) {
                console.log(newVal, oladVal)
                return this.loadParents(newVal);
            }
        }
    }
});
</script>
